<template>
<div class="aside qrcode">
    <div style="width: 99%; height: 100vh; overflow-y: auto">
      <div class="aside-container">
        <div class="aside-inner">
          <div class="aside-header">
            <div class="flex items-center">
              <svg t="1638788456705" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7415" width="28" height="28">
                <path fill="currentColor" d="M538.608 744.992l139.36-88.416-139.136-107.68-0.224 196.096z m139.328-372.32l-138.816-101.44-0.208 195.04 139.024-93.6zM291.488 336.96l9.952-12.496a16 16 0 0 1 22.304-2.688l166.784 129.088 0.272-242.88a16 16 0 0 1 25.44-12.88l226.72 165.744a16 16 0 0 1-0.48 26.192l-178.848 120.4 179.68 139.056a16 16 0 0 1-1.216 26.16l-227.36 144.256a16 16 0 0 1-24.592-13.52l0.272-246.656-167.36 112.672a16 16 0 0 1-22.08-4.16l-9.072-13.104a16 16 0 0 1 4.224-22.384l185.664-125.008-187.584-145.168a16 16 0 0 1-2.72-22.624z" p-id="7416"></path>
              </svg>
              {{ t('flypass.beacon') }} </div>
          </div>
          <hr
            style="
              margin-bottom: 16px;
              border-width: 0px 0px thin;
              border-style: solid;
              border-color: rgba(0, 0, 0, 0.12);
            "
          />
          <div class="px-4">
            <el-form label-position="top">
              <el-form-item label="Major">
                <el-input v-model="passTemplate.beacons[0].major"></el-input>
              </el-form-item>

              <el-form-item label="Minor">
                <el-input  v-model="passTemplate.beacons[0].minor"></el-input>
              </el-form-item>

              <el-form-item label="Proximity UUID">
                <el-input v-model="passTemplate.beacons[0].proximityUUID"></el-input>
              </el-form-item>

              <el-form-item label="Relevant Text">
                <el-input v-model="passTemplate.beacons[0].relevantText"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { usePassStore } from '@/store/modules/pass';
import { storeToRefs } from 'pinia';

const { passTemplate } = storeToRefs(usePassStore())
const { t } = useI18n()

</script>

<style lang="scss">
@import url('./styles/index.scss');
</style>
